<script setup>
/**
 * & 文件引入区域
 */
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";

import { useRoute, useRouter } from "vue-router";
import {
  getShopInfoById,
  selectShopInfoListByShopId,
  getIsFollowShopList,
  getUserFollowItemList,
  getUserUnfollowList,
} from "@/server/api/shopApi";

import { useIndexStore } from "@/stores/indexStore";
import { useUseStore } from "@/stores/user";

import { ToastFun } from "@/hook/toast";
import { initMap, getDistance, getLocation } from "@/utils/mapHandle";
import { OpenChildrenPage } from "@/hook/routerHandle.js";

import { getShopEvaluateListByItemId } from "@/server/api/Confirm";


const { t } = useI18n();
import tr from "@/lang/tr";
import { Login } from "@/server/api/LoginApi";

/**
 * & 变量声明区
 */
const router = useRouter();
const route = useRoute();
let userId = useUseStore().userId; // 获取userId
let baseUrl = useUseStore().ing; // 商品数据图片基础路径
let shopDetailData = ref(); // 实体店详情数据
let ShopInfoListData = ref(); // 实体店商品列表数据
// let ShopInfoListRqs = { pages: 1, limit: 30, shopId: "" };
let shopId = ref(); // 网店id
let isfollow = ref(); // 用户是否关注该店铺
let disArr = ref([]); // 距离
const CommentList = ref([]); //商品评论列表

//隐藏举报面板
const showReport = ref(false);


/**
 * & 函数区
 */
// 跳转实体店服务详情
const toScheduledDetailFun = (id) => {
  router.push({
    path: "/ScheduledDetail",
    query: { id },
  });
};

//跳转举报面板
const jumpReport = (id) => {
  showReport.value = false;//关闭弹窗
  router.push({
    path: '/Report',
    query: {
      id
    },
  });
  console.log(route.query.id);
};

// 获取实体店详情数据
const getShopInfoFun = async (id) => {
  ToastFun("Loading", { duration: 1000 });
  let res = await getShopInfoById(id);

  if (res.data.code == 200) {
    ToastFun("", {});
    let data = res.data.data;

    // 拼接图片路径
    // for (const i in data.shopImagList) {
    //   if (data.shopImagList[i] != null) {
    //     let ImgList = data.shopImagList[i].split(".");
    //     data.shopImagList[i] = baseUrl + ImgList[0] + "_640_360." + ImgList[1];
    //   }
    // }
    // data.userImage = baseUrl + data.userImage;

    // data.shopImagList.forEach((item) => {
    //   item = baseUrl + item;
    // });

    let { localhostLatitude, localhostLongitude } = data;

    // 添加经纬度数组
    let coords = [localhostLatitude, localhostLongitude];

    // console.log(arr);

    data.position = {
      address: data.shopName,
      localhostLatitude,
      localhostLongitude,
    };

    shopDetailData.value = data;
    // console.log(shopDetailData.value);
    // console.log("店铺详情");
    // 获取网店id
    shopId.value = shopDetailData.value.shopId;
    getIsFollowShopFun(shopId.value); //检验是否关注

    // console.log("实体店详情数据", shopDetailData.value);

    // 获取用户和商店的距离
    await getLocation();
    let arr = getDistance(coords);
    disArr.value = arr;

    // console.log("网店id", shopId.value);
  } else {
    ToastFun("", {});
  }
};

// 获取实体店商品列表数据
const getShopInfoListFun = async (id) => {
  let res = await selectShopInfoListByShopId(id);

  let data = res.data.data;
  // data.forEach((item) => {
  //   if (item.avatarImag != null) {
  //     let ImgList = item.avatarImag.split(".");
  //     item.avatarImag = baseUrl + ImgList[0] + "_90_100." + ImgList[1];
  //   }
  // });

  ShopInfoListData.value = data;
  console.log("实体店商品列表数据", ShopInfoListData.value);
};

// 检验是否关注
const getIsFollowShopFun = async () => {
  let res = await getIsFollowShopList({
    shopId: shopId.value,
    userId,
  });

  isfollow.value = res.data.data;
  // console.log("检验是否关注", isfollow.value);
};

// 关注实体店
const getUserFollowFun = async () => {
  ToastFun("Loading", { duration: 1000 });
  let { data } = await getUserFollowItemList({
    shopId: shopId.value,
    followId: userId,
  });
  // console.log("关注实体店", res.data.data);

  console.log(data);

  if (data.code == 200) {
    ToastFun("", {});
    isfollow.value = true;
  } else {
    ToastFun("", {});
  }
};

// 取消关注
const getUserUnFollowFun = async () => {
  ToastFun("Loading", { duration: 1000 });
  let { data } = await getUserUnfollowList({
    shopId: shopId.value,
    followId: userId,
  });

  if (data.code == 200) {
    ToastFun("", {});
    isfollow.value = false;
  } else {
    ToastFun("", {});
  }
};

// 跳转评论页面
const goComment = () => {
  router.push({
    path: "/shopComment",
    query: {
      shopId: shopId.value,
    },
  });
};


onMounted(() => {
  initMap();
  getShopInfoFun(route.query.id); // 获取实体店详情数据
  getShopInfoListFun(route.query.id); // 获取实体店商品列表数据
  getShopEvaluateListByItemId(1, 10, route.query.id).then((res) => {
    
    console.log(res.data.data);
    CommentList.value = res.data.data.list;
  });
});


</script>

<template>
  <!-- map -->
  <div id="container"></div>
  <div class="shopDetails" v-if="shopDetailData">
    <img src="/images/Shop/shopDetailBackBtn.png" alt="" class="backBtn" @click="$router.back()" />
    <!-- 更多 （举报） -->
    <div style="z-index: 1008;float: right;position: relative;">
      <div>
        <img src="/images/more.png" style="width: 25px;height: 25px;" @click="showReport = !showReport">
      </div>
      <ul v-show="showReport"
        style="width: 50px; border: 2px solid #7b7b7b; border-radius: 10px  10px 10px 10px ;color: #000;font-size: 12px;">
        <li @click="jumpReport(route.query.id)" style="border-bottom:1px #f7f7f7;">{{ $t("tipOff") }}</li>
      </ul>
    </div>
    <div class="swiper" dir="ltr">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, i) in shopDetailData.shopImagList" :key="i">
          <img v-lazy="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="DetailsInfo">
      <div class="title">
        <span >{{ shopDetailData.shopName }}</span>

        <!-- 关注以及取消关注按钮 -->
        <div class="btn" @click="getUserFollowFun" v-if="!isfollow">
          {{ $t("item.details.follow") }}
        </div>
        <div class="btn" @click="getUserUnFollowFun" v-else>
          {{ $t("item.details.unFollow") }}
        </div>
      </div>

      <div class="sorce">
        <div class="start" v-if="shopDetailData.score">
          <img src="/images/Shop/start1.png" alt="" v-for="(item, i) in parseInt(shopDetailData.score)" :key="i" />
          <img v-for="(item, i) in 5 - parseInt(shopDetailData.score)" :key="i" src="/images/Shop/start2.png" alt="" />
          <div class="num">{{ shopDetailData.score }}</div>
        </div>
      </div>

      <div class="address">
        <div class="title">
          <img src="/images/Shop/下箭头.png" alt="" class="btn" />
          <span>Others</span>
        </div>

        <div class="from">
          <div class="title">
            <span>{{ shopDetailData.address }}</span>
            <div class="distance"></div>
          </div>

          <div class="sub">
            <span v-for="(item, i) in shopDetailData.shopTagsList" :key="item.tagId">
              {{ item.content }}
              <span v-if="i != shopDetailData.shopTagsList.length - 1">|</span>
            </span>
          </div>
        </div>

        <div class="to">
          <div class="title">
            <!-- 1.4km by car <span>｜</span> It takes 8 minutes -->
            {{ disArr.length ? disArr : $t("shop.shopList.noPosition") }}
          </div>

          <div :class="['logo', useIndexStore().isRtl ? 'is_rtl' : '']"
            @click="OpenChildrenPage('/mapView', shopDetailData.position)">
            <img src="/images/Shop/map.png" alt="" />
            <span> {{ $t("shop.shopList.map") }} </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 店铺评论 -->
    <div :class="['commentBox', useIndexStore().isRtl ? 'is_rtl' : '']">
      <span>{{ $t("item.details.comment") }}</span>
      <div @click="goComment"><img src="/images/cart/go.png" alt="" /></div>
    </div>

    <div
      class="commentItem"
      v-for="item of CommentList.slice(0, 5)"
      :key="item.evaluateId"
    >
      <div class="top">
        <img :src="item.userImage" alt="" />
        <div class="right">
          <div class="nickName">{{ item.userName }}</div>
          <div class="time">{{ item.createTime }}</div>
        </div>
      </div>
      <div class="commentContent">
        <p>{{ item.evaluate }}</p>
      </div>
    </div>

    <div class="scheduled" v-if="ShopInfoListData">
      <div class="title">{{ $t("shop.shopList.scheduledTitle") }}</div>

      <div class="list">
        <div class="item" v-for="item in ShopInfoListData" :key="item.commodityId">
          <img v-lazy="item.avatarImag" alt="" :class="['logo', useIndexStore().isRtl ? 'is_rtl' : '']" />

          <div class="info">
            <div class="title">{{ item.commodityName }}</div>
            <div class="sub">{{ $t("shop.shopDetail.walk") }}</div>
            <div class="price">
              <span>Pi</span>
              <div class="num">{{ item.price }}</div>
            </div>
          </div>

          <div class="right">
            <div class="btn" @click="toScheduledDetailFun(item.commodityId)">
              {{ $t("item.details.enter") }}
            </div>

            <span>{{ $t("shop.shopDetail.sale") }} {{ item.monthlySales }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 店铺评论
.shopDetails>.commentBox {
  width: 100vw;
  height: 25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rem;
  background: #f5f5f5;

  position: relative;
  z-index: 10;

  &.is_rtl {
    span {
      margin-left: 0;
      margin-right: 16rem;
    }

    div {
      margin-right: 0;
      margin-left: 16rem;

      img {
        transform: rotate(180deg);
      }
    }
  }

  span {
    font-size: 16rem;
    font-weight: 500;
    color: #333;
    margin-left: 16rem;
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24rem;
    height: 24rem;
    line-height: 24rem;
    margin-right: 16rem;

    img {
      width: 6rem;
      height: 12rem;
    }
  }
}

.shopDetails {
  max-height: 100vh;
  min-height: 100vh;
  background: #f5f5f5;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  >.backBtn {
    position: fixed;
    z-index: 1000;
    top: 10rem;
    left: 16rem;
  }

  >.swiper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    img {
      width: 100%;
      max-height: 240rem;
    }

    :deep(.van-swipe__indicators) {
      bottom: 40rem;
    }
  }

  >.DetailsInfo {
    position: relative;
    margin-top: 240rem;
    padding: 16rem 16rem 12rem;
    background: #fff;
    border-radius: 12rem 12rem 0rem 0rem;
    .title {
  color: #333333;
  font-size: 24rem;
  font-weight: 500;
  line-height: 24rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4rem;
  flex-wrap: nowrap; /* 不允许换行 */

  span {
    line-height: 24rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  >.btn {
    color: #642e8e;
    font-size: 12rem;
    line-height: 16rem;
    border: 1rem solid #642e8e;
    border-radius: 4rem; 
    padding: 5px 10px; /* 按钮内边距 */
    cursor: pointer; /* 鼠标悬停时显示为可点击 */
    white-space: nowrap; /* 确保按钮文本不会换行 */
    /* 不再限制宽度，也去掉文本溢出处理 */
    overflow: visible; /* 不隐藏超出部分 */
    text-overflow: clip; /* 取消省略号显示 */
  }
}
    >.sorce {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8rem;

      line-height: 16rem;
      font-size: 14rem;
      font-weight: 400;
      color: #cccccc;

      >.start {
        display: flex;
        align-items: center;

        img {
          width: 14rem;
          margin-right: 2rem;
        }

        >.num {
          margin-left: 10rem;
          font-weight: 500;
          color: #666666;
        }
      }
    }

    >.address {
      font-size: 14rem;
      font-weight: 400;
      line-height: 16rem;

      >.title {
        display: flex;
        align-items: center;
        margin-bottom: 8rem;

        >.btn {
          width: 16rem;
          margin-right: 4rem;
        }

        >span {
          color: rgba(153, 153, 153, 1);
        }
      }

      >.from {
        color: #666;
        border-bottom: 1rem solid #e6e6e6;

        >.title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          >.distance {
            margin-left: 10rem;
          }
        }

        >.sub {
          display: flex;
          align-items: center;
          margin: 4rem 0rem 12rem;
          color: #cccccc;

          >span {
            >span {
              margin: 0 5rem;
            }
          }
        }
      }

      >.to {
        margin-top: 16rem;
        position: relative;

        >.title {
          color: #999;
          padding: 8rem 0;
        }

        >.logo {
          display: flex;
          flex-direction: column;
          align-items: center;

          position: absolute;
          right: 0;
          top: -5rem;

          &.is_rtl {
            left: 0;
            right: unset;
          }

          >img {
            width: 18rem;
            margin-bottom: 6rem;
          }

          >span {
            font-size: 14rem;
            line-height: 16rem;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }

  >.scheduled {
    padding: 20rem 16rem 0;
    background: #f5f5f5;
    position: relative;
    z-index: 100;

    >.title {
      padding-bottom: 4rem;
      margin-bottom: 12rem;

      position: relative;

      font-size: 20rem;
      font-weight: 500;
      line-height: 28rem;
      color: #333;

      width: max-content;

      &::before {
        content: "";
        position: absolute;

        width: 16rem;
        height: 2rem;
        background: #642e8e;
        border-radius: 1rem;

        left: calc(50% - 8rem);
        bottom: 0;
      }
    }

    >.list {
      position: relative;

      >.item {
        display: flex;
        padding: 8rem;
        margin-bottom: 8rem;
        background: #fff;
        border-radius: 8rem;

        >img.logo {
          width: 64rem;
          height: 64rem;
          margin-right: 12rem;

          border-radius: 8rem;

          &.is_rtl {
            margin-right: 0;
            margin-left: 12rem;
          }
        }

        >.info {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          >div {
            width: 100%;
          }

          >.title {
            font-size: 16rem;
            font-weight: 500;
            line-height: 16rem;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 4rem;
          }

          >.sub {
            font-size: 13rem;
            font-weight: 400;
            line-height: 18rem;
            color: rgba(153, 153, 153, 1);
          }

          >.price {
            display: flex;

            font-size: 14rem;
            font-weight: 500;
            line-height: 20rem;
            color: #642e8e;

            span {
              color: #999;
              margin-right: 4rem;
            }
          }
        }

        >.right {
          font-size: 12rem;
          font-weight: 400;
          line-height: 16rem;

          display: flex;
          flex-direction: column;
          align-items: flex-end;

          >.btn {
            color: #fff;
            background: #642e8e;
            border-radius: 8rem;
            padding: 6rem 12rem;
            margin: 14rem 0rem 4rem;
          }

          >span {
            color: #ccc;
          }
        }
      }
    }
  }

  .commentItem {
    width: 100%;
    margin-top: 10rem;
    position: relative;
    border: 1px solid white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 11px;
    background-color: #f9f9f9;
    box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.1);

    .top {
      height: 40rem;
      width: 100%;
      display: flex;

      img {
        width: 40rem;
        height: 40rem;
        border-radius: 50%;
        object-fit: cover;
      }

      .right {
        margin-left: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .nickName {
          font-size: 15rem;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }

        .time {
          font-size: 13rem;
          font-weight: 400;
          color: rgba(204, 204, 204, 1);
        }
      }
    }

    .commentContent {
      width: 100%;
      // min-height: 92rem;
      // max-height: 128rem;
      margin-top: 14rem;
      border-bottom: 1rem solid rgba(230, 230, 230, 1);
      padding-bottom: 14rem;

      p {
        width: 100%;
        min-height: 40rem;
        max-height: 156rem;
        font-size: 15rem;
        font-weight: 500;
        line-height: 20rem;
        color: rgba(51, 51, 51, 1);
        // 超出隐藏
        word-break: keep-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        overflow: hidden;
        box-sizing: content-box;
        text-align: justify;
        word-wrap: break-word;
      }
    }

    .delete {
      position: absolute;
      top: 8rem;
      right: 12rem;
      width: 18rem;
      height: 18rem;
      border-radius: 50%;
      border: 1rem solid rgba(100, 46, 142, 1);
      line-height: 16rem;
      text-align: center;
      font-size: 14rem;
    }
  }
}
</style>
